<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
     <!-- 引入Vue 全局注册一个名为Vue的构造函数 -->
    <script src="./js/vue.js"></script>
    <script type="text/javascript" src="../js/dayjs.min.js"></script>
    <title>Document</title>
</head>
<!-- v-cloak可以让未经解析的模板不渲染在页面上。 --> 
<!-- 第一个参数是要转化的值，第二个参数字符串 -->
<body>
    <div id="root1">
     <h2>显示当前时间</h2>
     <!-- 计算属性实现 -->
     <h3>当前时间是 {{timeNow}}</h3>
     <!-- 方法实现 -->
     <h3>当前时间时 {{getTimeNow()}}</h3>
     <!-- 过滤器实现 -->
     <h3>当前时间是 {{ time  | filterTimeNow}}</h3>
     <!-- 过滤器传参 -->
     <h3>当前时间是 {{ time  | filterTimeNow("YYYY-MM-DD") | mySlice}}</h3>
    </div>
    <script>
        //全局的过滤器
Vue.filter('mySlice',function(value){
    return value.slice(0,4);
})

    new Vue({
    el: '#root1',
    data: {
      time:1722569914729,
    },
    methods:{
        getTimeNow(){
            return dayjs().format('YYYY-MM-DD HH:mm:ss')
        }
    },
    mounted() {
      console.log('$options的值为',this.$options);
      console.log('值为',this.$options.filters['mySlice']);
      this.$options.filters.showname();
    },
    computed:{
    timeNow(){
        return dayjs().format('YYYY-MM-DD HH:mm:ss')
    }
    },
    filters:{
        filterTimeNow(value,str=('YYYY-MM-DD HH:mm:ss')){
       
            return dayjs(value).format(str)
        },
        mySlice(value){
            return value.slice(0,4);
        },
        showname(){
            console.log('你好');
            
        }
    }
})
    </script>
</body>
</html>